<script setup>
import {request} from "@/util/request.js";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from 'vue-router'

const router = useRouter()

const products = ref([]);

function getProducts() {
    request({
        url: "/products/list",
        method: "get",
    }).then((res) => {
        products.value = res.data;
    });
}

function openGoodsInfo(product) {
    // 打开商品的详细信息
    router.push({
        name: 'info',
        params: {
            id: product.productId
        }
    })
}

onMounted(() => {
    getProducts();
});
</script>

<template>
    <el-row>
        <el-col
            v-for="(product, index) in products"
            :key="product.productId"
            :span="5"
            :offset="index % 4 > 0 ? 1 : 0"
            class="goods_card"
        >
            <el-card :body-style="{ padding: '0px' }" @click="openGoodsInfo(product)">
                <!--显示默认图片-->
                <img
                    :src="'/api' + product.defaultImage.imageUrl"
                    class="image"
                />
                <div style="text-align: center; padding: 10px">
                    <div>{{ product.name }}</div>
                    <div style="margin: 5px 0;color: red;">
                        ￥{{ product.price }}
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<style scoped>
.goods_card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.goods_card:hover {
    cursor: pointer;
    transform: scale(1.02); /* 变大的倍数可以根据需求调整 */
}

.el-card {
    height: 280px;
}

.image {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
}
</style>